<template>
    <div style="padding: 70px 200px">
<!--        <a-button @click="test"> 测试</a-button>-->
        <a-result
                v-if="status===1"
                status="success"
                :title="'下单成功！请在'+minute+'分'+second+'秒内支付'"
                :sub-title="'订单编号'+orderId"
        >
            <template #extra>
                <vue-qr :text="downloadData.url" :margin="0" colorDark="black" colorLight="#fff"
                        :logoSrc="downloadData.icon + '?cache'" :logoScale="0.2" :size="300"></vue-qr>
            </template>
        </a-result>
        <div v-if="status===1" style="text-align: center;horiz-align: center">
            <a-button type="primary" style="width: 300px;height: 50px" @click="pay">
                <span style="font-size: 20px">支付</span>
            </a-button>
        </div>

        <a-result
                v-if="status===2||paySuccess"
                status="success"
                title="支付成功！"
                :sub-title="'订单编号'+orderId"
        >
            <template #extra>
                <a-button key="console" type="primary" @click="toOrderCenter">
                    返回订单中心
                </a-button>
            </template>
        </a-result>

        <a-result v-show="!status||status===-1" status="warning" title="暂无订单">
            <template #extra>
                <a-button key="console" type="primary" @click="toCarIndex">
                    返回我的购物车
                </a-button>
            </template>
        </a-result>
        <a-result v-if="status===6" status="warning" title="订单已经取消">
            <template #extra>
                <a-button key="console" type="primary" @click="toCarIndex">
                    返回我的购物车
                </a-button>
            </template>
        </a-result>
    </div>
</template>

<script>
    import {getUrlParam} from "../../utils/urlUtils";
    import vueQr from 'vue-qr'
    import orderApi from "../../api/order/orderApi";

    export default {
        components: {
            vueQr
        },
        name: "orderPay",
        inject: ["reload"],

        data() {
            return {
                orderId: "",
                downloadData: {
                    url: 'https://www.baidu.com',
                    icon: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
                },
                paySuccess: false,//是否支付成功
                //订单状态(1-已提交-待付款，2-已付款-待发货， 3 -交易成功，4-交易取消 -1 非法订单 )
                status: undefined,
                minute: undefined,//剩余支付时间 min
                second: undefined, // 剩余支付时间 s（分钟内的秒）
                endTime: undefined//订单失效时间
            }
        },
        created() {
            let urlParam = getUrlParam();
            if (urlParam && urlParam.orderId) {
                this.orderId = urlParam.orderId
                this.queryOrder()
            }

        },
        methods: {
            pay() {
                orderApi.pay(this.orderId).then(resp => {
                    if (resp.data.flag) {
                        this.reload()
                    }
                })
            },
            beginTime() {
                let index = setInterval(() => {
                    this.minute = this.endTime.diff(this.$moment(), "minute")
                    this.second = this.endTime.diff(this.$moment(), "seconds") % 60
                    if (this.minute <= 0 && this.second === 0) {
                        clearInterval(index)
                        this.sleep(1000)
                        this.reload()
                    }
                }, '1000')
            },
            queryOrder() {
                if (this.orderId !== undefined && this.orderId !== "") {
                    orderApi.checkOrder(this.orderId).then(resp => {
                        if (resp.data.flag) {
                            this.status = resp.data.data.status
                            console.log(this.status)

                            if (this.status === 1) {
                                let time = resp.data.data.createTime;
                                this.endTime = this.$moment(time).add(-1, 'month').add(5, 'minutes')

                                this.minute = this.endTime.diff(this.$moment(), "minute")
                                this.second = this.endTime.diff(this.$moment(), "seconds") % 60
                                this.beginTime()

                            }

                        }
                    })
                }
            },
            toOrderCenter() {
                this.$router.push("/user-center/order_index")
            },
            /**
             * 睡眠
             * @param numberMillis m秒
             */
            sleep(numberMillis) {
                var now = new Date();
                var exitTime = now.getTime() + numberMillis;
                while (true) {
                    now = new Date();
                    if (now.getTime() > exitTime)
                        return;
                }
            },
            toCarIndex(){
                this.$router.push("/cart_index")
            },
            test(){
                orderApi.test().then(resp=>{

                })
            }
        }
    }
</script>

<style scoped>

</style>